<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/siimple.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="shortcut icon" href="img/favicon.png">
		<title>HTTP Server</title>
	</head>
	<body>
		<ul class="navbar">
			<li><a href="/">Home</a></li>
			<li><a class="active" href="websockets">WebSockets</a></li>
			<li><a href="about">About</a></li>
		</ul>

		<div class="grid main">
			<h1>WebSockets Demo</h1>
			<div id="status_box" class="alert alert-info">Loading..</div>
			<p>This page is similar to the home page but uses WebSockets for real-time updates.</p>
			<div class="cover" align="center">
				<canvas id="chartCanvas" width="512" height="100"></canvas>
				<p/>
				<p>LED Control</p>
				<div class="onoffswitch">
					<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="led-switch" onclick="gpio()">
					<label class="onoffswitch-label" for="led-switch">
						<span class="onoffswitch-inner"></span>
						<span class="onoffswitch-switch"></span>
					</label>
				</div>
			</div>

			<h1>Server Status</h1>
			<table class="table table-striped">
				<tr>
					<td><b>Uptime:</b></td>
					<td id="uptime"></td>
				</tr>
				<tr>
					<td><b>Free heap:</b></td>
					<td id="heap"></td>
				</tr>
				<tr>
					<td><b>LED state:</b></td>
					<td id="led"></td>
				</tr>
			</table>

			<h1>How it works</h1>
			<p>This demo uses 2 WebScokets. Status parameters are streamed by the server in JSON format every 2 seconds.
				A <code>websocket_task</code> is created each time a specific URI is requested.</p>
			<p>ADC values are being continuously polled by the client (i.e. your browser).
				Each time a WebSocket frame is received on the server side, <code>websocket_cb</code> function is being called.</p>
		</div>

		<script type="text/javascript" src="js/smoothie_min.js"></script>
		<script>
			var ws;
			var retries;
			var series = new TimeSeries();
			window.onload = function() {
				wsOpen();
				startPolling();
			}
			function setMsg(cls, text) {
				sbox = document.getElementById('status_box');
				sbox.className = "alert alert-" + cls;
				sbox.innerHTML = text;
				console.log(text);
			}
			function startPolling() {
				var chart = new SmoothieChart({millisPerPixel:11,grid:{fillStyle:'#ffffff',strokeStyle:'#ffffff',borderVisible:false},
					labels:{fillStyle:'#000000'},maxValue:1024,minValue:0});
				chart.addTimeSeries(series, {lineWidth:2,strokeStyle:'#03a9f4',fillStyle:'#f1f5fa'});
				chart.streamTo(document.getElementById("chartCanvas"), 500);
				setInterval(function() { wsWrite('A'); }, 500);
			}
			function onMessage(evt) {
				retries = 0;
				var dv = new DataView(evt.data);
				var val = dv.getUint16(0);
				if (val == 0xBEEF || val == 0xDEAD)
					console.log("LED switched");
				else
					series.append(new Date().getTime(), val);
			}
			function wsOpen() {
				if (ws === undefined || ws.readyState != 0) {
					if (retries)
						setMsg("error", "WebSocket timeout, retrying..");
					else
						setMsg("info", "Opening WebSocket..");
					ws = new WebSocket("ws://" + location.host);
					ws.binaryType = 'arraybuffer';
					ws.onopen = function(evt) { retries = 0; setMsg("done", "WebSocket is open."); };
					ws.onerror = function(evt) { setMsg("error", "WebSocket error!"); };
					ws.onmessage = function(evt) { onMessage(evt); };
					wsOpenStream();
					retries = 0;
				}
			}
			function wsOpenStream() {
				var uri = "/stream"
				var ws = new WebSocket("ws://" + location.host + uri);
				ws.onmessage = function(evt) {
					console.log(evt.data);
					var stats = JSON.parse(evt.data);
					console.log(stats);
					document.getElementById('uptime').innerHTML = stats.uptime + ' seconds';
					document.getElementById('heap').innerHTML = stats.heap + ' bytes';
					document.getElementById('led').innerHTML = (stats.led == 1) ? 'On' : 'Off';
				};
			}
			function wsWrite(data) {
				if (ws.readyState == 3 || retries++ > 5)
					wsOpen();
				else if (ws.readyState == 1)
					ws.send(data);
			}
			function gpio() {
				if (document.getElementById('led-switch').checked)
					wsWrite('E');
				else
					wsWrite('D');
			}
		</script>
	</body>
</html>
